import React, { Component } from 'react'
import { Card } from 'antd'
import BooksTrendsChart from './BooksTrendsChart'
import BooksUploadNumChart from './BooksUploadNumChart'
import UserEvaluationChart from './UserEvaluationChart'
const tabList = [
  {
    key: 'tab1',
    tab: '库存书籍动向'
  },
  {
    key: 'tab2',
    tab: '书籍上传量'
  },
  {
    key: 'tab3',
    tab: '平台评价'
  }
]

const contentList = {
  tab1: <BooksTrendsChart />,
  tab2: <BooksUploadNumChart />,
  tab3: <UserEvaluationChart />
}

export default class Dashboard extends Component {
  constructor() {
    super()
    this.state = {
      key: 'tab1'
    }
  }
  onTabChange = (key, type) => {
    this.setState({ [type]: key })
  }
  render() {
    return (
      <Card title="数据统计" bordered={false} style={{ width: '100%' }}>
        <Card
          style={{ width: '100%' }}
          tabList={tabList}
          activeTabKey={this.state.key}
          onTabChange={key => {
            this.onTabChange(key, 'key')
          }}
        >
          {contentList[this.state.key]}
        </Card>
      </Card>
    )
  }
}
